<template>
  <div>
    <div class="titles">
      <div style="font-size: 20px;width: 50%" align="left">轮播图管理</div>
      <div align="right" style="padding-left: 20px;width: 50%">
        <el-button type="primary" @click="addSlideShow" style="margin-right: 20px">添加轮播图</el-button>
      </div>
    </div>
    <div class="main">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="date"
            label="图片"
            >
          <template slot-scope="scope">
            <img :src="scope.row.imgAddress" style="height: 300px">
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="图片地址"
            width="300">
          <template slot-scope="scope">
            {{scope.row.imgAddress}}
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="上传时间"
            width="250">
          <template slot-scope="scope">
            <el-date-picker
                v-model="scope.row.date"
                type="date"
                format="yyyy-MM-dd hh:mm:ss"
                value-format="yyyy-MM-dd hh:mm:ss" style="border: 0" readonly>
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Button from "@/components/Button";

export default {
  name: "SlideShowManager",
  components: {Button},
  methods: {
    handleClick(row) {
      var _this = this
      console.log(row.id)
      axios.get('http://localhost:8082/book-manager/slideshow/delte?id='+row.id).then(function (resp){
        if(resp.data.flag){
          _this.$message(resp.data.message)
          location.reload();
        }
      })
    },
    addSlideShow(){
      this.$router.push('addSlideShow')
    }
  },

  data() {
    return {
      tableData: [
        {
          "id": 1111,
          "imgId": "20210410220917",
          "imgAddress": "http://file.mataiji.top/2021-04-091617544720274.png",
          "date": "2021-04-04T14:09:17.000+0000"
        }
      ]
    }
  },
  created() {
    var _this = this
    axios.get("http://localhost:8082/book-manager/slideshow/select").then(function (resp){
      _this.tableData = resp.data
    })
  }
}
</script>

<style scoped>
.titles {
  height: 60px;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
}

.titles div {
  display: inline-block;
}
.main{
  padding-top: 30px;
}
</style>
